<template>
	<view class="content fofa poRel">
		<view v-if="Object.keys(userinfo).length > 0">
			<view :style="{'background-color':back}" style="z-index: 9999999;">
				<view :style="{'height':tops+'px', 'background-color': back}"
					style="position: fixed;z-index: inherit;width: 100%;"></view>
				<view :style="{'height':tops+'px'}"></view>
				<view class="top" :style="{'width':widths+'px','top':tops+'px', 'background-color': back}"
					style="position: fixed;z-index: inherit;">
					<!-- 中间标题 -->
					<view class="wid100 dis disAl disJuC  coFFF">
						<view class="dis disAl disJuC" @click="toggle">
							<view class="mar-right10 foSi40">{{titleList[title]}}</view>
							<uni-icons v-if="!show" type="bottom" color="#fff" size="40rpx"></uni-icons>
							<uni-icons v-if="show" type="top" color="#fff" size="40rpx"></uni-icons>
						</view>
					</view>
				</view>
				<view class="" style="height: 90rpx;background-color: #fff;"></view>
			</view>
			<view class="wid100 " style="height: 120rpx;" :style="{'background-color':back}">
				<view class="wid90 hei100 mar dis disAl disJuB">
					<view class="bacFFF borRad10 dis disAl disJuC" style="width: 80%;height: 70rpx;">
						<image :src="aurl+icon_list.sousuo" style="height: 31rpx;width: 31rpx;"></image>
						<input class="mar-left10" v-model="suosou" style="width: 75%;" placeholder="搜索文件" 
						@focus="focisInput" @confirm="suosouInput"/>
					</view>
					<view v-if="!suosouTrue" class="dis disAl" style="justify-content: flex-end;width: 20%;">
						<uni-icons type="more-filled" color="#fff" size="30"></uni-icons>
						<image :src="aurl+icon_list.shaixuan1" @click="toggle1"
						class="mar-left30" style="width: 42rpx;height: 42rpx;"></image>
					</view>
					<view v-if="suosouTrue" @click="qixiao" style="width: 20%;"
						class="dis disAl disJuC coFFF foSi35">取消</view>
				</view>
			</view>
			<view v-if="suosouTrue" class="wid100 bacFFF mar-top30" :style="'height: calc(100vh - 270rpx - '+(tops*2)+'px);'">
				<view style="height: 20rpx;"></view>
				<view class="wid90 mar hei60 dis disAl disJuB">
					<view class="foSi30">历史记录</view>
					<uni-icons v-if="lishijilu.length != 0" @click="qingchu" type="trash" size="30"></uni-icons>
				</view>
				<view class="wid90 mar dis disAl flwa">
					<view v-for="(item,index) in lishijilu" :key="index" class="foSi25 mar-left20 mar-top20 borRad40"
						style="padding: 10rpx 20rpx;border: 1rpx solid #858585;" @click="jiluClick(index)">{{item}}</view>
				</view>
			</view>
			<scroll-view v-if="!suosouTrue" :style="'height: calc(100vh - 270rpx - '+(tops*2)+'px);'" @refresherrefresh="onPulling" :refresher-triggered="triggered"
				scroll-y="true" class="scroll-Y" @scrolltolower="lower" :refresher-enabled="true">
				<view class="wid100" v-if="list.length == 0">
					<view class="wid100" style="height: 220rpx;"></view>
					<view class="wid100 textCen">
						<image :src="aurl+icon_list.wushuju" style="width: 306rpx;height: 200rpx;"></image>
						<view class="mar-top30 foSi25" style="color: #858585;">暂无文件</view>
					</view>
				</view>
				<view v-for="(item,index) in list" :key="index" class="wid90 mar bacFFF borRad10 mar-top30">
					<view class="wid95 mar foSi25" @click="supplementTiaozhuan(item.flowid,item)">
						<view class="dis disAl disJuB hei60 foSi20">
							<view class="dis disAl">
								<view style="width: 6rpx;height: 40rpx;" :style="'background-color: '+backTwo+';'"></view>
								<view class="mar-left10">{{item.contracts_name}}</view>
							</view>
							<view v-if="item.state == 'PENDING' || item.state == 'FILLPENDING'" class="dis disAl">
								<view>剩余时间：{{item.deadline}}</view>
								<view class="mar-left20" :style="'color: '+backTwo+';'">去签署</view>
								<uni-icons size="16" :color="backTwo" type="right"></uni-icons>
							</view>
							<view v-if="item.state == 'ACCEPT' || item.state == 'FILLACCEPT'" class="dis disAl">
								<view>剩余时间：{{item.deadline}}</view>
								<view class="mar-left20" :style="'color: '+backTwo+';'">去查看</view>
								<uni-icons size="16" :color="backTwo" type="right"></uni-icons>
							</view>
							<view v-if="item.state != 'PENDING' && item.state != 'FILLPENDING' &&
							 item.state != 'ACCEPT' && item.state != 'FILLACCEPT'" class="dis disAl">
								<view>剩余时间：{{item.deadline}}</view>
								<view class="mar-left20" style="color: #bdbdbd;">查看失效原因</view>
								<uni-icons size="16" color="#bdbdbd" type="right"></uni-icons>
							</view>
						</view>
						<view class="wid90 mar">
							<view style="height: 20rpx;"></view>
							<view class="dis disAl">
								<view style="width: 25%;">合同名称：</view>
								<view>{{item.contracts_name}}</view>
							</view>
							<view v-if="item1.isPromoter == 0" class="dis disAl mar-top20"
								v-for="(item1,index1) in item.recipients" :key="index">
								<view style="width: 25%;">发起方：</view>
								<view>{{item1.roleName}}</view>
							</view>
							<view v-for="(item1,index1) in item.recipients" :key="index" class="dis disAl mar-top20">
								<view style="width: 25%;">签署方：</view>
								<view v-if="item1.isPromoter == 1">{{item1.roleName}}</view>
								<view v-if="item1.isPromoter == 0">{{item1.approveName}}</view>
							</view>
							<view style="height: 40rpx;"></view>
						</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
			<uni-popup ref="popup" @change="change">
				<view :style="{'height':tops+'px'}"></view>
				<view class="wid90 mar bacFFF borRad10" style="margin-top: 90rpx;">
					<view class="dis disAl disJuB hei80" @click="close(0)"
						style="padding: 0 20rpx;" :style="title == 0?'color:'+back+';':''">
						<view class="">{{titleList[0]}}</view>
						<uni-icons v-if="title == 0" type="checkmarkempty" :color="back" size="30"></uni-icons>
					</view>
					<view class="dis disAl disJuB hei80" @click="close(1)"
						style="padding: 0 20rpx;background-color: #F4F3F3;" :style="title == 1?'color:'+back+';':''">
						<view class="">{{titleList[1]}}</view>
						<uni-icons v-if="title == 1" type="checkmarkempty" :color="back" size="30"></uni-icons>
					</view>
					<view class="dis disAl disJuB hei80" @click="close(2)"
						style="padding: 0 20rpx;" :style="title == 2?'color:'+back+';':''">
						<view class="">{{titleList[2]}}</view>
						<uni-icons v-if="title == 2" type="checkmarkempty" :color="back" size="30"></uni-icons>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup1" background-color="#fff" @change="change1">
				<view style="height: 20rpx;"></view>
				<view class="hei80 wid90 mar dis disAl foSi35 fowe600" :style="'color:'+back+';'">过期理由</view>
				<view class="wid90 mar dis disAl foSi30 mar-bott20">部分签署方未在签署截止前完成签署</view>
				<view class="wid90 mar borRad10 dis disAl disJuC hei80 coFFF fowe600 foSi30" 
				:style="'background-color: '+back+';'" @click="queren()">确认</view>
			</uni-popup>
			<view class="zhezhao wh100 poAbs" v-if="tanOne">
				<view class="wh100 dis " style="align-items: flex-end;">
					<view class="wid100 foSi25 bacFFF" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
						<view class="wid90 mar">
							<view style="height: 20rpx;"></view>
							<view class="foSi30 hei60 dis disAl">筛选范围</view>
							<view class="dis disAl flwa">
								<view v-for="(item,index) in titleList" :key="index" class="foSi25 mar-left20 mar-top20 borRad40 "
									style="padding: 10rpx 20rpx;border: 1rpx solid #D8D9D7;" @click="fanwei(index)"
									:class="fanweiIndex == index?'coFFF':''" :style="fanweiIndex == index?'background-color: '+back+';':''">{{item}}</view>
							</view>
							<view class="foSi30 hei60 dis disAl mar-top30">签署状态</view>
							<view :style="stateTrue?'':'height: 160rpx;overflow: hidden;'">
								<view class="dis disAl flwa">
									<view v-for="(item,index) in stateList" :key="index" class="foSi25 mar-left20 mar-top20 borRad40 "
										style="padding: 10rpx 20rpx;border: 1rpx solid #D8D9D7;" @click="zhangtai(index)"
										:class="stateIndex == index?'coFFF':''" :style="stateIndex == index?'background-color: '+back+';':''">{{item.title}}</view>
								</view>
							</view>
							<view class="dis disAl mar-top20 foSi20" style="color: #BBBBBB;" @click="stateTrue = !stateTrue">
								<view>显示全部</view>
								<uni-icons v-if="!stateTrue" type="down" size="20rpx" color="#BBBBBB"></uni-icons>
								<uni-icons v-if="stateTrue" type="up" size="20rpx" color="#BBBBBB"></uni-icons>
							</view>
							<!-- <view class="foSi30 hei60 dis disAl mar-top20">类型</view>
							<view class="dis disAl flwa">
								<view v-for="(item,index) in typeList" :key="index" class="foSi25 mar-left20 mar-top20 borRad40 "
									style="padding: 10rpx 20rpx;border: 1rpx solid #D8D9D7;" @click="typeClick(index)"
									:class="typeIndex == index?'coFFF':''" :style="typeIndex == index?'background-color: '+back+';':''">{{item}}</view>
							</view> -->
							<view class="foSi30 hei60 dis disAl disJuB mar-top20">
								<view>时间筛选</view>
								<!-- <uni-datetime-picker v-model="dateTime" type="daterange" @change="changeLog" :end="date">
									<view class="dis disAl hei100" style="justify-content: flex-end;">
										<uni-icons type="calendar" size="30rpx" color="#888888"></uni-icons>
										<view class="mar-left10 foSi20" style="color: #888888;">自定义</view>
									</view>
								</uni-datetime-picker> -->
							</view>
							<view class="dis disAl flwa">
								<view v-for="(item,index) in dateList" :key="index" class="foSi25 mar-left20 mar-top20 borRad40 "
									style="padding: 10rpx 20rpx;border: 1rpx solid #D8D9D7;" @click="dateClick(index)"
									:class="dateIndex == index?'coFFF':''" :style="dateIndex == index?'background-color: '+back+';':''">{{item}}</view>
							</view>
							<view style="height: 50rpx;"></view>
							<!-- <cj-slider v-if="cjSlider" v-model="priceValue" :value="priceValue" :min="0" :max="days" 
							moveHeight="100" @end="blockEnd"></cj-slider>
							<cj-slider v-if="!cjSlider" v-model="priceValue" :value="priceValue" :min="0" :max="days"
							moveHeight="100" @end="blockEnd"></cj-slider>
							<view style="height: 20rpx;"></view> -->
						</view>
						<view class="wid100 dis disAl bacFFF box1 mar-top20" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" style="height: 125rpx;">
							<view class="wid90 mar dis disAl disJuB foSi35">
								<view class="hei80 dis disAl disJuC coFFF borRad10" :style="'background-color: '+backTwo+';'" @click="chongzhi"
									style="width: 300rpx;">重置</view>
								<view class="hei80 dis disAl disJuC coFFF borRad10" :style="'background-color: '+back+';'"
								 style="width: 300rpx;" @click="close1">确认</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view :style="{'background-color':back}" style="z-index: 9999999;">
				<view :style="{'height':tops+'px', 'background-color': back}"
					style="position: fixed;z-index: inherit;width: 100%;"></view>
				<view :style="{'height':tops+'px'}"></view>
				<view class="top" :style="{'width':widths+'px','top':tops+'px', 'background-color': back}"
					style="position: fixed;z-index: inherit;">
					<!-- 中间标题 -->
					<view class="wid100 dis disAl disJuC coFFF foSi40">文件夹</view>
				</view>
				<view class="" style="height: 90rpx;background-color: #fff;"></view>
			</view>
			<view :style="'height: calc(100vh - 270rpx - '+(tops*2)+'px);'">
				<view class="wid100" v-if="list.length == 0">
					<view class="wid100":style="'background-color: '+back+';'" style="height: 140rpx;"></view>
					<view class="wid90 mar bacFFF box1 textCen borRad10" style="margin-top: -80rpx;">
						<view class="wid100" style="height: 220rpx;"></view>
						<image :src="aurl+icon_list.wushuju" style="width: 306rpx;height: 200rpx;"></image>
						<view class="foSi30 mar-top30">请登录后体验</view>
						<view class="wid80 mar hei80 dis disAl disJuC borRad10 coFFF foSi30 mar-top40" 
						:style="'background-color: '+back+';'" @click="tiaozhuan">去登录</view>
						<view class="wid100" style="height: 220rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"></view>
		<tablist v-if="hideTabBar" :back="back" :backTwo="backTwo" :datalist="datalist" :index="1"></tablist>
	</view>
	
</template>

<script>
	import tablist from "../common/tablist/tablist.vue"
	export default {
		components: {
			tablist
		},
		data() {
			return {
				aurl: this.global.url,
				hideTabBar: true,
				paddingBottomHeight: 0,
				aurl:this.global.url,
				datalist: [],
				// userinfo分两个，一个是个人主账户，一个是正在使用中的账户，账户更换在首页
				userinfo:{} ,// 个人中心使用使用中账号
				token:'',
				cjSlider: false,
				tanOne: false,
				days: 0,
				priceValue: [0,0],
				suosou: '',
				suosou1: '',//之前搜索数据
				suosouTrue: false,
				lishijilu: [],
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				tops: 0,
				widths: 0,
				title: 0,
				titleList: ["我参与的",'我的待办','提醒我关注的'],
				stateList:[
					{title: '全部', state: ''},{title: '待签署', state: 'PENDING'},{title: '已签署', state: 'ACCEPT'},
					{title: '拒绝', state: 'REJECT'},{title: '过期没人处理', state: 'DEADLINE'},{title: '流程已撤回', state: 'CANCEL'},
					{title: '流程已终止', state: 'STOP'},{title: '待领取', state: 'WAITPICKUP'},{title: '待填写', state: 'FILLPENDING'},
					{title: '填写完成', state: 'FILLACCEPT'},{title: '解除协议', state: 'RELIEVED'},{title: '拒绝填写', state: 'FILLREJECT'},
					{title: '异常', state: 'EXCEPTION'}
				],
				show: false,
				last_page: 1,
				page: 1,
				triggered: false,
				_freshing: false,
				list: [],
				fanweiIndex: 0,
				stateTrue: false,
				stateIndex: 0,
				typeList:["全部","分销合同","承诺/授权","服务/合作","租赁","采购/销售","人事/劳动"],
				typeIndex: 0,
				dateList: ["全部",'最近一周','最近一月','最近半年'],
				dateIndex: 0,
				dateTime: ['2021-07-01',new Date().toISOString().slice(0, 10)],
				date: '',
				state: '',
				icon_list:{
					shaixuan:'/addon/qianyu_dzq/wechatimg/shaixuan.png',
					shaixuan1:'/addon/qianyu_dzq/wechatimg/shaixuan1.png',
					sousuo:'/addon/qianyu_dzq/wechatimg/sousuo.png',
					wushuju:'/addon/qianyu_dzq/wechatimg/wushuju.png',
				}
				
			}
		},
		onLoad() {
			uni.hideTabBar()
			var that = this
			that.date = new Date().toISOString().slice(0, 10)
			that.days = that.getDays('2021-07-01',that.date)
			that.priceValue = [0,that.days]
			that.getList()
			uni.$on('Refresh_userinfo',function(data){
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.getList()
			})
		},
		onShow(){
			var that = this
			var userinfo = uni.getStorageSync('inuse_userinfo');
			console.log('使用中用户信息')
			console.log(userinfo)
			if(userinfo){
				this.userinfo = userinfo
				this.token = uni.getStorageSync('inuse_userinfo_token')
			}
			that.datalist = uni.getStorageSync('datalist')
		},
		created() {
			var that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					that.tops = e.statusBarHeight
					that.widths = e.safeArea.width
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(e.model.indexOf(item) != -1 && e.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			})
		},
		methods: {
			queren(){
				this.$refs.popup1.close()
			},
			supplementTiaozhuan(flowId,item){
				if(item.state != 'PENDING' && item.state != 'FILLPENDING' &&
				item.state != 'ACCEPT' && item.state != 'FILLACCEPT'){
					this.state = item.state
					this.$refs.popup1.open('bottom')
				}else{
					uni.setStorageSync('flowId', flowId)
					uni.navigateTo({
						url: '/pages/template/replenishOne'
					});
					
					// uni.navigateTo({
					// 	url: '/pages/template/supplement'
					// });
				}
			},
			getList(){
				var that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					url: that.global.url+'api/qianyu_dzq/applet_contracts_list',
					method: 'POST',
					header:{'site-id':that.global.site_id,'token': uni.getStorageSync('inuse_userinfo_token')},
					data: {
						range: that.title,
						page: that.page,
						range_state: that.stateList[that.stateIndex].state,
						range_date: that.dateIndex
						
					},
					success(res) {
					    let result = res.data
						console.log(result);
					    if(result.code == 1){
							var data = result.data
							that.last_page = data.last_page
							if(that.page == 1){
								that.list = data.data
							}else{
								that.list = that.list.concat(data.data)
							}
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						that.triggered = false;
						that._freshing = false;
						uni.hideLoading()
					}
				})
			},
			tiaozhuan(url){
				if(!Object.keys(this.userinfo).length > 0){
					url = '/pages/login/login'
				}
				uni.navigateTo({
					url: url
				});
			},
			getDays(strDateStart, strDateEnd) {
				var strSeparator = "-";
				//日期分隔符   var oDate1;   var oDate2;
				var iDays;
				var oDate1 = strDateStart.split(strSeparator);
				var oDate2 = strDateEnd.split(strSeparator);
				var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
				var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
				iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24)
				//把相差的毫秒数转换为天数
				return iDays;
			},
			getTime(strDateStart, strDateEnd){
				var date = new Date().getTime()
				let one_day = 86400000; // 24 * 60 * 60 * 1000;
				var start = parseInt(Math.abs(this.days - strDateStart) * one_day)
				var end = parseInt(Math.abs(this.days - strDateEnd) * one_day)
				this.dateTime = [new Date(date - start).toISOString().slice(0, 10), new Date(date - end).toISOString().slice(0, 10)]
				console.log(this.dateTime)
				console.log(this.priceValue)
				this.cjSlider = !this.cjSlider
			},
			blockEnd() {
				// console.log('滑动结束')
				this.getTime(this.priceValue[0],this.priceValue[1])
			},
			dateClick(index){
				if(this.dateIndex == index){return;}
				this.dateIndex = index
				if(index == 1){
					this.priceValue = [this.days-7, this.days]
				}else if(index == 2){
					this.priceValue = [this.days-30, this.days]
				}else if(index == 3){
					this.priceValue = [this.days-180, this.days]
				}else{
					this.priceValue = [0, this.days]
				}
				this.getTime(this.priceValue[0],this.priceValue[1])
			},
			changeLog(e) {
				console.log('change事件:', e);
				this.dateTime = e
				var daysOne = this.getDays(e[0],new Date().toISOString().slice(0, 10))
				var daysTwo = this.getDays(e[1],new Date().toISOString().slice(0, 10))
				this.priceValue = [this.days-daysOne, this.days-daysTwo]
				console.log(this.priceValue)
				this.cjSlider = !this.cjSlider
			},
			typeClick(index){
				this.typeIndex = index
			},
			fanwei(index){
				this.fanweiIndex = index
			},
			zhangtai(index){
				this.stateIndex = index
			},
			jiluClick(index){
				this.suosou = this.lishijilu[index]
				this.suosou1 = this.lishijilu[index]
				var jilu = [this.suosou]
				for (var i = 0; i<this.lishijilu.length; i++) {
					if(i != index){
						jilu.push(this.lishijilu[i])
					}
				}
				this.lishijilu = jilu
				uni.setStorageSync('lishijilu',this.lishijilu)
				this.suosouTrue = false
				this.hideTabBar = true
			},
			qixiao(){
				this.suosouTrue = false
				this.hideTabBar = true
			},
			qingchu(){
				this.lishijilu = []
				uni.setStorageSync('lishijilu', this.lishijilu)
			},
			focisInput(){
				this.suosouTrue = true
				this.lishijilu = uni.getStorageSync('lishijilu')
				this.hideTabBar = false
			},
			suosouInput: function(event) {
				this.page = 1
				if(this.suosou && this.suosou1 != this.suosou){
					this.suosou1 = this.suosou
					var jilu = [this.suosou]
					for (var i = 0; i<this.lishijilu.length; i++) {
						if(jilu.length < 7){
							jilu.push(this.lishijilu[i])
						}
					}
					this.lishijilu = jilu
					uni.setStorageSync('lishijilu',this.lishijilu)
				}
				this.suosouTrue = false
			this.hideTabBar = true
			},
			onPulling(e) {
				var that = this
				if (that._freshing) return;
				that._freshing = true;
				that.triggered = true
				this.page = 1
				this.getList()
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			change(e) {
				this.show = e.show
			},
			change1(e) {
				if(e.show){
					this.hideTabBar = false
				}else{
					setTimeout(()=>{
						this.hideTabBar = true
					},300)
				}
			},
			chongzhi(){
				this.fanweiIndex = this.title
				this.stateIndex = 0
				this.fanweiIndex = 0
				this.typeIndex = 0
				this.dateIndex = 0
				this.dateTime = ['2021-07-01',new Date().toISOString().slice(0, 10)]
				this.priceValue = [0,this.days]
				this.cjSlider = !this.cjSlider
			},
			close1(){
				this.title = this.fanweiIndex
				this.tanOne = false
				this.hideTabBar = true
				this.getList()
			},
			toggle1() {
				this.tanOne = true
				this.fanweiIndex = this.title
				this.hideTabBar = false
			},
			toggle() {
				if(!this.tanOne){
					if(this.show){
						this.$refs.popup.close()
					}else{
						this.$refs.popup.open('top')
					}
				}
			},
			close(index){
				this.title = index
				this.$refs.popup.close()
				this.getList()
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F4F3F3;
	}
	.top {
		width: 100%;
		display: flex;
		/* align-items: center; */
		height: 90rpx;
	}
	.vue-ref{
		/* bottom: 0; */
		/* top: 0; */
	}
	.zhezhao {
		background-color: rgb(0, 0, 0, 0.6);
		top: 0;
		z-index: 9999;
	}
	
	.tan {
		width: 546rpx;
		background-color: #fff;
	}
</style>
